<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
// import { getUserData } from '#/api';

import { columns, formSchema } from './user.data.ts';
import userModel from './userModel.vue';

defineOptions({ name: 'SystemUser' });

interface RowType {
  _id: number;
  name: string;
  loginName: string;
  orgAccountName: string;
  telNumber: string;
  gender: number;
}

const formOptions: VbenFormProps = {
  schema: formSchema,
  showCollapseButton: false,
  actionButtonsReverse: true,
  // 大屏一行显示4个，中屏一行显示3个，小屏一行显示2个
  wrapperClass: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
};

const gridOptions: VxeGridProps<RowType> = {
  columns,
  pagerConfig: { pageSize: 10 },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const params = Object.assign({}, formValues, {
          pageNo: page.currentPage,
          pageSize: page.pageSize,
        });
        return await getUserTableApi(params);
      },
    },
  },
  stripe: true,
  rowConfig: {
    isHover: true,
  },
};

/** 查询用户信息 */
async function getUserTableApi(formData) {
  return {
    items: [
      {
        companyName: '测试公司',
        deptName: '研发一部',
        loginName: 'zhangsan',
        name: '张三',
        sex: '0',
        tel: '13932569155',
        email: '123@qq.com',
      },
      {
        companyName: '测试公司',
        deptName: '研发一部',
        loginName: 'lisi',
        sex: '1',
        name: '李四',
        tel: '13932569155',
        email: '123@qq.com',
      },
      {
        companyName: '测试公司',
        deptName: '研发一部',
        loginName: 'admin',
        name: '管理员',
        sex: '0',
        tel: '13932569155',
        email: '123@qq.com',
      },
    ],
    total: 2,
  };
  // const res = await getUserData(formData);
  // const { result, totalPage } = res;
  // return { items: result, total: totalPage };
}

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const [Modal, modalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: userModel,
});

function openModal(type: string, row: object) {
  modalApi.setData({
    type,
    records: row,
  });
  modalApi.setState({ title: type === 'add' ? '用户添加' : '用户编辑' }).open();
}
</script>

<template>
  <Page>
    <Grid table-title="用户列表">
      <template #toolbar-tools>
        <Button type="primary" @click="openModal('add', {})"> 添加 </Button>
      </template>
      <template #action="{ row }">
        <Button type="link" @click="openModal('edit', row)"> 编辑 </Button>
        <Button danger type="link">删除</Button>
      </template>
    </Grid>
    <!-- 用户弹框 -->
    <Modal />
  </Page>
</template>
